<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <el-col :span="7">
        <Card title="分类商品数量(饼图)">
          <PieEchart :pieData="categoryGoodsCount"></PieEchart>
        </Card>
      </el-col>
      <el-col :span="10">
        <Card title="不同城市商品销量">
          <MapEchart
            subtext="特性示例：渐变比例 悬浮数量 滚动缩放"
            :mapData="addresGoodsSale"
          ></MapEchart>
        </Card>
      </el-col>
      <el-col :span="7">
        <Card title="分类商品数量(玫瑰图)">
          <RoseEchart :roseData="categoryGoodsCount"></RoseEchart>
        </Card>
      </el-col>
    </el-row>
    <el-row class="content-row" :gutter="10">
      <el-col :span="12">
        <Card title="分类商品的销量">
          <LineEchart v-bind="categoryGoodsSale"></LineEchart>
        </Card>
      </el-col>
      <el-col :span="12">
        <Card title="分类商品的收藏">
          <BarEchart
            title="特性示例：渐变色 阴影 点击缩放"
            v-bind="categoryGoodsFavor"
          ></BarEchart>
        </Card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from '@/store'
import Card from '@/base-ui/card'
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart,
  MapEchart
} from '@/components/page-echarts'
export default defineComponent({
  name: 'dashboard',
  components: { Card, PieEchart, RoseEchart, LineEchart, BarEchart, MapEchart },
  setup() {
    const store = useStore()
    store.dispatch('dashboard/getDashboardDataAction')
    const categoryGoodsCount = computed(() => {
      return store.state.dashboard.categoryGoodsCount.map((item: any) => {
        return { name: item.name, value: item.goodsCount }
      })
    })

    //分类数据
    const categoryGoodsSale = computed(() => {
      const xLabels: string[] = []
      const values: string[] = []
      const categoryGoodsSales = store.state.dashboard.categoryGoodsSale
      for (const item of categoryGoodsSales) {
        xLabels.push(item.name)
        values.push(item.goodsCount)
      }
      return { xLabels, values }
    })

    //收藏数据
    const categoryGoodsFavor = computed(() => {
      const xLabels: string[] = []
      const values: string[] = []
      const categoryGoodsFavors = store.state.dashboard.categoryGoodsFavor
      for (const item of categoryGoodsFavors) {
        xLabels.push(item.name)
        values.push(item.goodsFavor)
      }
      return { xLabels, values }
    })

    //地图数据
    const addresGoodsSale = computed(() => {
      return store.state.dashboard.addresGoodsSale.map((item: any) => {
        return { name: item.address, value: item.count }
      })
    })
    return {
      categoryGoodsCount,
      categoryGoodsSale,
      categoryGoodsFavor,
      addresGoodsSale
    }
  }
})
</script>

<style lang="less" scoped>
.content-row {
  margin-top: 20px;
}
</style>
